<template>
	<view class="container">
		<view class="header">
			<view class="title">我的申请</view>
			<view class="subtitle">查看和管理您的各类申请</view>
		</view>

		<view class="action-bar">
			<button class="add-btn" @click="handleAddApply">
				<text class="iconfont icon-add"></text>
				<text>新增申请</text>
			</button>
		</view>

		<view class="apply-list">
			<view class="apply-card" v-for="(item, index) in applyList" :key="index">
				<view class="card-header">
					<view class="card-title">
						<text class="title-text">{{ item.title }}</text>
						<text class="status-tag"
							:class="getStatusClass(item.status)">{{ getStatusText(item.status) }}</text>
					</view>
					<view class="card-desc">{{ item.description }}</view>
				</view>
				<view class="card-content">
					<view class="requirement-list">
						<view class="requirement-item" v-for="(req, reqIndex) in item.requirements" :key="reqIndex">
							<text class="dot"></text>
							<text class="text">{{ req }}</text>
						</view>
					</view>
					<button class="apply-btn" @click="handleApply(item.type)" v-if="item.status === 10">立即申请</button>
					<view class="apply-info" v-else>
						<view class="info-item">
							<text class="label">申请时间：</text>
							<text class="value">{{ item.applyTime }}</text>
						</view>
						<view class="info-item" v-if="item.reason">
							<text class="label">申请理由：</text>
							<text class="value">{{ item.reason }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		get
	} from '@/common/js/request';
	import {
		userAddPromotion,
		userGetDept,
		userGetPromotionList,
		userInfo
	} from '../../common/js/api';

	const userStatus = ref('');
	const userStatusNum = ref(0);
	const applyList = ref([]);
	const userId = uni.getStorageSync('userId');

	// 状态映射
	const statusMap = {
		'群众': 0,
		'入党积极分子': 1,
		'发展对象': 2,
		'预备党员': 3,
		'正式党员': 4
	};

	// 申请类型配置
	const applyConfig = {
		'active': {
			title: '入党积极分子申请',
			description: '申请成为入党积极分子',
			requirements: [
				'年满18周岁',
				'提交入党申请书',
				'思想汇报合格'
			]
		},
		'develop': {
			title: '发展对象申请',
			description: '申请成为发展对象',
			requirements: [
				'积极分子满一年',
				'思想汇报合格',
				'培养联系人推荐'
			]
		},
		'probation': {
			title: '预备党员申请',
			description: '申请成为预备党员',
			requirements: [
				'发展对象考察合格',
				'提交入党志愿书',
				'支部大会通过'
			]
		},
		'formal': {
			title: '正式党员申请',
			description: '申请转为正式党员',
			requirements: [
				'预备期满一年',
				'思想汇报合格',
				'支部大会通过'
			]
		}
	};

	// 获取用户状态
	const getUserStatus = async () => {
		try {
			const res = await userInfo(userId);
			userStatus.value = res.politicalStatus;
			userStatusNum.value = statusMap[userStatus.value] || 0;
		} catch (error) {
			console.error('获取用户状态失败:', error);
		}
	};

	// 获取申请状态
	const getApplyStatus = async () => {
		try {
			const res = await userGetPromotionList(userId);

			const status = res.data;
			var tempList = [];

			for (var i = 0; i < status.length; ++i) {
				status[i].createTime = status[i].createTime.replace('T','');
				if (status[i].type == '入党积极分子') {
					const tmp = {
						type: 'active',
						status: status[i].status || 0,
						applyTime: status[i].createTime || '',
						reason: status[i].reason || '',
						...applyConfig.active
					};
					tempList.push(tmp);
				} else if (status[i].type == '发展对象') {
					const tmp = {
						type: 'develop',
						status: status[i].status || 0,
						applyTime: status[i].createTime || '',
						reason: status[i].reason || '',
						...applyConfig.develop
					};
					tempList.push(tmp);
				} else if (status[i].type == '预备党员') {
					const tmp = {
						type: 'probation',
						status: status[i].status || 0,
						applyTime: status[i].createTime || '',
						reason: status[i].reason || '',
						...applyConfig.probation
					};
					tempList.push(tmp);
				} else if (status[i].type == '正式党员') {
					const tmp = {
						type: 'formal',
						status: status[i].status || 0,
						applyTime: status[i].createTime || '',
						reason: status[i].reason || '',
						...applyConfig.formal
					};
					tempList.push(tmp);
				} 
			}
			applyList.value = tempList;
		} catch (error) {
			console.error('获取申请状态失败:', error);
		}
	};

	// 获取状态样式类
	const getStatusClass = (status) => {
		const statusMap = {
			0: 'status-pending',
			1: 'status-approved',
			2: 'status-rejected'
		};
		return statusMap[status] || 'status-pending';
	};

	// 获取状态文本
	const getStatusText = (status) => {
		const statusMap = {
			0: '待审核',
			1: '已通过',
			2: '未通过'
		};
		return statusMap[status] || '待审核';
	};

	// 处理申请
	const handleApply = (type) => {
		const typeMap = {
			'active': '入党积极分子',
			'develop': '发展对象',
			'probation': '预备党员',
			'formal': '正式党员'
		};

		uni.showModal({
			title: '申请理由',
			editable: true,
			placeholderText: '请输入申请理由',
			success: (res) => {
				if (res.confirm && res.content) {
					// 再次确认
					uni.showModal({
						title: '确认申请',
						content: `确定要申请成为${type}吗？`,
						success: (confirmRes) => {
							if (confirmRes.confirm) {
								submitApply(type, res.content);
							}
						}
					});
				} else if (res.confirm && !res.content) {
					uni.showToast({
						title: '请填写申请理由',
						icon: 'none'
					});
				}
			}
		});
	};

	// 提交申请
	const submitApply = async (type, reason) => {
		try {
			const res1 = await userGetDept(userId);
			console.log(res1);
			if (res1.code == 200) {
				const data = {
					userId: userId,
					deptId: res1.data.deptUser.id,
					type: type,
					reason: reason,
					status: 0
				};
				const res = await userAddPromotion(data);
				if (res.code === 200) {
					uni.showToast({
						title: '申请提交成功',
						icon: 'success'
					});
					// 刷新申请状态
					getApplyStatus();
				} else {
					uni.showToast({
						title: res.msg || '申请提交失败',
						icon: 'none'
					});
				}
			} else {
				console.error('提交申请失败:', error);
				uni.showToast({
					title: '获取支部失败',
					icon: 'none'
				});
			}
		} catch (error) {
			console.error('提交申请失败:', error);
			uni.showToast({
				title: '申请提交失败',
				icon: 'none'
			});
		}
	};

	// 处理新增申请
	const handleAddApply = () => {
		// 根据当前政治面貌确定可选的申请类型
		const availableTypes = [];
		const typeMap = {
			'群众': {
				text: '入党积极分子',
				type: 'active'
			},
			'入党积极分子': {
				text: '发展对象',
				type: 'develop'
			},
			'发展对象': {
				text: '预备党员',
				type: 'probation'
			},
			'预备党员': {
				text: '正式党员',
				type: 'formal'
			}
		};

		// 获取当前可选的申请类型
		const currentType = typeMap[userStatus.value];
		if (currentType) {
			availableTypes.push(currentType);
		}

		// 如果没有可选的申请类型
		if (availableTypes.length === 0) {
			uni.showToast({
				title: '您当前没有可申请的选项',
				icon: 'none'
			});
			return;
		}

		// 显示操作菜单
		uni.showActionSheet({
			itemList: availableTypes.map(item => item.text),
			success: (res) => {
				const selectedType = availableTypes[res.tapIndex].text;
				handleApply(selectedType);
			}
		});
	};

	onMounted(() => {
		getUserStatus();
		getApplyStatus();
	});
</script>

<style lang="scss">
	.container {
		min-height: 100vh;
		background-color: #f5f7fa;
		padding: 20rpx;
	}

	.header {
		padding: 30rpx 20rpx;

		.title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 10rpx;
		}

		.subtitle {
			font-size: 28rpx;
			color: #666;
		}
	}

	.action-bar {
		padding: 20rpx;
		margin-bottom: 20rpx;

		.add-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 80rpx;
			background: linear-gradient(135deg, #1890ff, #36cfc9);
			color: #fff;
			font-size: 28rpx;
			border-radius: 40rpx;
			border: none;

			.iconfont {
				margin-right: 10rpx;
				font-size: 32rpx;
			}

			&:active {
				opacity: 0.9;
			}
		}
	}

	.apply-list {
		padding: 20rpx 0;
	}

	.apply-card {
		background-color: #fff;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
		overflow: hidden;

		.card-header {
			padding: 30rpx;
			border-bottom: 2rpx solid #f5f5f5;

			.card-title {
				display: flex;
				align-items: center;
				margin-bottom: 10rpx;

				.title-text {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
					margin-right: 20rpx;
				}

				.status-tag {
					padding: 4rpx 16rpx;
					border-radius: 20rpx;
					font-size: 24rpx;

					&.status-pending {
						background-color: #e6f7ff;
						color: #1890ff;
					}

					&.status-approved {
						background-color: #f6ffed;
						color: #52c41a;
					}

					&.status-rejected {
						background-color: #fff2f0;
						color: #ff4d4f;
					}
				}
			}

			.card-desc {
				font-size: 26rpx;
				color: #666;
			}
		}

		.card-content {
			padding: 30rpx;

			.requirement-list {
				margin-bottom: 30rpx;

				.requirement-item {
					display: flex;
					align-items: center;
					margin-bottom: 16rpx;

					&:last-child {
						margin-bottom: 0;
					}

					.dot {
						width: 12rpx;
						height: 12rpx;
						background-color: #ff7a45;
						border-radius: 50%;
						margin-right: 16rpx;
					}

					.text {
						font-size: 28rpx;
						color: #666;
					}
				}
			}

			.apply-btn {
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				background: linear-gradient(135deg, #ff7a45, #ff9a9e);
				color: #fff;
				font-size: 28rpx;
				border-radius: 40rpx;
				border: none;

				&:disabled {
					background: #f5f5f5;
					color: #999;
				}

				&:active {
					opacity: 0.9;
				}
			}

			.apply-info {
				.info-item {
					display: flex;
					margin-bottom: 16rpx;

					&:last-child {
						margin-bottom: 0;
					}

					.label {
						font-size: 28rpx;
						color: #666;
						width: 160rpx;
					}

					.value {
						font-size: 28rpx;
						color: #333;
						flex: 1;
					}
				}
			}
		}
	}
</style>